<style>

</style>

<div id="select_menu" style="padding: 10px;overflow: scroll;margin-right:10px;"></div>
<script src="./component.js"></script>
<script>
    {
        var selected_framework = [];
        var old_result = "";
        var render_somthing_demo_x;
        render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#select_menu",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
<div style="display: flex;flex-direction: row;align-items: center;"></div>
`
            },
            // 渲染内容的配置
            content: {
                default: `
<div data-key="select_click" style="margin-left: 10px;white-space: nowrap;">
    <span id="#{title}" style="background-color: #c2c2c2;padding-left:20px;padding-right:20px;padding-top:5px;padding-bottom:5px;color: #fff;">#{title}</span>
</div>
`,
            },
            callback: {
                //点击
                click: function (res) {
                    if (res.key == "select_click") {
                        if ($('#' + res.value.title).css("background-color") != "rgb(194, 194, 194)") {
                            //因为文字渲染占用1

                            removeByValue(selected_framework, res.value.title);
                            //不选
                            old_value = editor.getValue().replace(framework_import_content[res.value.title],
                                '')
                            $('#' + res.value.title).css("background-color", "#c2c2c2");
                        } else {
                            //选择
                            $('#' + res.value.title).css("background-color", "#5FB878");
                            selected_framework.push(res.value.title)
                        }
                        madeImport(selected_framework)
                    }

                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            // condition: [{
            //     expression: "^{ROW_INDEX}==0",
            //     html: `
            //     <div class="dcdev-title" style="white-space: nowrap;margin-left:10px;">
            //         #{title}
            //     </div>`
            // }],
        })

        render_somthing_demo_x.render([{
                title: "jqueryui",
            },
            {
                title: "weui",
            },
            {
                title: "layui",
            },
            {
                title: "bootstrap",
            },
            {
                title: "elementui",
            },
            {
                title: "amazeui",
            },
            {
                title: "semanticui",
            },
            {
                title: "vue",
            },

        ]);
    }

    function removeByValue(arr, val) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == val) {
                arr.splice(i, 1);
                break;
            }
        }
    }

    function madeImport(result) {
        console.log(result)
        var flag = false;
        //如果任何属性有空的，就不执行了
        result.forEach(element => {
            //不选
            if (element == "" || element == null || element == undefined) {
                flag = true;
            }
        });
        if (flag) {
            return;
        }
        result.forEach(element => {
            //不选
            $('#' + element).css("background-color", "#c2c2c2");
        });

        var tips_top = "<!-- 系统引入框架开始 -->"
        var tips_bottom = "<!-- 系统引入框架结束 -->\n"
        var data = "";
        data = data + tips_top;
        result.forEach(element => {
            $('#' + element).css("background-color", "#5FB878");
            //data=data+"\n"+`<!-- 这部分是${element}引入开始 -->`
            var temp = framework_import_content[element];
            data = data + '\n' + temp;
            //data=data+"\n"+`<!-- ${element}引入结束 -->`
        });
        selected_framework = result;
        //准备数据
        //判断是不是只有注释,如果是则data=空
        if (data == "<!-- 系统引入框架开始 -->") {
            data = "";
        } else {
            data = data + '\n' + tips_bottom;
        }
        //搜索定位标签内容所在处,获取range
        var codeimport = getComponentCode("<!-- 系统引入框架开始 -->", "<!-- 系统引入框架结束 -->");
        //根据range进行删除
        if (codeimport.length > 0) {
            select_by_range(codeimport[0].range);
            replace_selected_content('\n');
        }

        console.log(codeimport)
        console.log("引入框架标准测试")
        //标准插入
        var range = new monaco.Range(1, 1, 1, 1);
        var id = {
            major: 1,
            minor: 1
        };
        var text = data;
        var op = {
            identifier: id,
            range: range,
            text: text,
            forceMoveMarkers: true
        };
        editor.executeEdits("html_editor", [op]);
        editor.focus()
    }
</script>